<template>
  <div class="login-body">
    <!-- title -->
    <h1><span>M</span>odish <span>L</span>ogin <span>F</span>orm</h1>
    <!-- //title -->

    <!-- content -->
    <div class="sub-main-w3">
      <el-form class="login" ref="ruleFormRef" :model="ruleForm" :rules="rules">
        <fieldset>
          <p class="legend">Login Here</p>
          <div class="input">
            <el-form-item prop="username">
              <el-input
                v-model="ruleForm.username"
                size="large"
                placeholder="用户名"
              >
                <template #prefix>
                  <SvgIcon
                    icon-name="username"
                    width="20"
                    height="20"
                  ></SvgIcon>
                </template>
              </el-input>
            </el-form-item>
          </div>
          <div class="input">
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="ruleForm.password"
                size="large"
                placeholder="密码"
                :show-password="true"
              >
                <template #prefix>
                  <SvgIcon icon-name="lock" width="20" height="20"></SvgIcon>
                </template>
              </el-input>
            </el-form-item>
          </div>
          <button class="submit" @click="submitForm(ruleFormRef)">
            <SvgIcon
              icon-name="login"
              width="34"
              height="34"
              color="white"
            ></SvgIcon>
          </button>
        </fieldset>
        <div class="feedback">
          You have logged in
          <br />
          successfully.
        </div>
      </el-form>
    </div>
    <!-- //content -->

    <!-- copyright -->
    <div class="footer">
      <h2>
        &copy; 2023 Modish Login Form. All rights reserved | Design by
        <a href="">Boom</a>
      </h2>
    </div>
    <!-- //copyright -->
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { FormInstance, FormRules, ElNotification } from "element-plus";
// 引入用户相关小仓库
import useUserStore from "@/store/modules/user";
// router
import { useRouter } from "vue-router";
//
import { getTime } from "@/utils/time";
import { ru } from "element-plus/es/locale/index.js";

interface RuleForm {
  username: string;
  password: string;
}

const ruleFormRef = ref<FormInstance>();

const ruleForm = reactive<RuleForm>({
  username: "admin",
  password: "1111110",
});
const validatorUseName = (rule: any, value: any, callback: any) => {
  if (value.length >= 5) {
    callback();
  } else {
    callback(new Error("请输入用户名"));
  }
};
const rules = reactive<FormRules<RuleForm>>({
  username: [
    {
      required: true,
      validator: validatorUseName,
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      min: 6,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
});

let userStore = useUserStore();

let $router = useRouter();

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid: any) => {
    if (valid) {
      // 验证通过后，通知仓库发送登录请求
      // 成功 -> 首页 展示数据
      // 失败 -> 弹出登录失败信息
      handleUserLogin();
    }
  });
};

const handleUserLogin = async () => {
  try {
    // 成功
    await userStore.userLogin_(ruleForm);
    // 编程式导航
    $router.push("/");
    ElNotification({
      type: "success",
      message: "登录成功",
      title: `Hi，${getTime()}好！`,
    });
  } catch (error) {
    // console.log(error);
    ElNotification({
      type: "error",
      message: (error as Error).message,
    });
  }
};
</script>

<style scoped>
@import "./index.css";
</style>
